<template>
  <!-- 空模板：数据没回来时显示 -->
  <div class="Control-container">
    <el-card class="card-content">
      <div class="card-container">
        <!-- 左边：图片 -->
        <div class="card-left">
          <el-empty
            description="加载失败"
            style="width: 113px; height: 113px"
          ></el-empty>
        </div>
        <!-- 右边:信息 -->
        
        
        <div class="card-right">
          <!-- 第一行 -->
          <div class="right-title">
            <!-- 左边文字 -->
            <div class="title">
              <h6>加载中。。。</h6>
              <p>加载中。。。</p>
            </div>
            <!-- 右边绿色 -->
            <div class="status">
              <span>
                <svg
                  t="1687853733390"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7748"
                  width="13"
                  height="13"
                >
                  <path
                    d="M512 995.555556C244.622222 995.555556 28.444444 779.377778 28.444444 512S244.622222 28.444444 512 28.444444s483.555556 216.177778 483.555556 483.555556-216.177778 483.555556-483.555556 483.555556z m0-910.222223C275.911111 85.333333 85.333333 275.911111 85.333333 512s190.577778 426.666667 426.666667 426.666667 426.666667-190.577778 426.666667-426.666667S748.088889 85.333333 512 85.333333z"
                    p-id="7749"
                    fill="#8C8C8C"
                  ></path>
                  <path
                    d="M512 512m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z"
                    p-id="7750"
                    fill="#8C8C8C"
                  ></path>
                </svg>
              </span>
            </div>
          </div>
          <!-- 第二行 -->
          <div class="card-number">
            <div class="number">
              <h6>0</h6>
              <p>检测总数</p>
            </div>
            <div class="number number-padding">
              <h6>0%</h6>
              <p>好品率</p>
            </div>
            <div class="number">
              <h6>0</h6>
              
              <p>效率/时</p>
            </div>
          </div>
          <!-- 第三行 -->
          <div class="card-icon">
            <div class="icon">
              <!-- CPU使用率 -->
              <el-popover placement="top" content="0" trigger="hover">
                <template #reference>
                  <img
                    src="./img/CPU1.svg"
                    alt="cpu使用率"
                    style="width: 24px; height: 24px; margin-top: 4px"
                  />
                </template>
              </el-popover>
              <!-- GPU使用率 -->
              <el-popover placement="top" content="0" trigger="hover">
                <template #reference>
                  <img
                    src="./img/GPU1.svg"
                    alt="GPU使用率"
                    style="width: 24px; height: 24px; margin-top: 4px"
                  />
                </template>
              </el-popover>
              <!-- RAM使用率 -->
              <el-popover placement="top" content="0" trigger="hover">
                <template #reference>
                  <img
                    src="./img/RAM1.svg"
                    alt="RAM使用率"
                    style="width: 24px; height: 24px; margin-top: 4px"
                  />
                </template>
              </el-popover>
              <!-- HHD使用率 -->
              <el-popover placement="top" content="0" trigger="hover">
                <template #reference>
                  <img
                    src="./img/HHD1.svg"
                    alt="HHD使用率"
                    style="width: 24px; height: 24px; margin-top: 4px"
                  />
                </template>
              </el-popover>
              <!-- NET使用率 -->
              <el-popover placement="top" content="0" trigger="hover">
                <template #reference>
                  <img
                    src="./img/NET1.svg"
                    alt="NET使用率"
                    style="width: 24px; height: 24px; margin-top: 4px"
                  />
                </template>
              </el-popover>
            </div>
            <div class="btn">详情</div>
          </div>
        </div>
      </div>
      <!-- 故障报警 -->
      <!-- 条件还未完成 -->
    </el-card>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
@font-face {
  font-family: DINCond-Medium;
  src: url(../../assets/font/DINCond-Medium.otf);
}

:deep(.el-card__body) {
  padding: 0;
}
/*激活的状态*/
.active {
  color: #f2994a;
}
.Control-container {


  .card-content {
    margin: 0 0px 24px 0px;
    width: 597px;
    position: relative;
    .card-container {
      display: flex;
      padding: 21px;
      align-items: center;

      /*右边图片*/
      .card-left {
        margin-right: 30px;
      }

      /*右边信息*/
      .card-right {
        display: flex;
        flex-direction: column;

        /*第一行文字*/
        .right-title {
          display: flex;
          justify-content: space-between;

          .title {
            h6 {
              font-family: "Source Han Sans CN";
              font-style: normal;
              font-weight: 600;
              font-size: 16px;
              line-height: 26px;
              letter-spacing: 1px;
              color: #595959;
              opacity: 0.9;
            }

            p {
              font-family: "Source Han Sans CN";
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              line-height: 22px;
              color: #f2994a;
              letter-spacing: 1px;
            }
          }
          .status {
            margin-top: -20px;
          }
        }

        /*第二行数字*/
        .card-number {
          display: flex;
          margin: 40px 0;
          width: 401px;
          justify-content: space-between;

          .number {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          h6 {
            font-family: "DINCond-Medium", sans-serif;
            font-style: normal;
            font-weight: 500;
            font-size: 28px;
            line-height: 26px;
            color: #262626;
          }

          p {
            font-family: "Source Han Sans CN";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #8c8c8c;
          }
        }

        /*第三行图标*/
        .card-icon {
          display: flex;
          justify-content: space-between;

          .icon {
            display: flex;
            justify-content: space-between;

            :deep(.el-tooltip__trigger) {
              margin-right: 22px;
            }
          }

          .btn {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 2px 6px;
            gap: 8px;
            width: 40px;
            height: 24px;
            border: 1px solid #f2994a;
            border-radius: 4px;
            font-family: "Source Han Sans CN";
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #f2994a;
          }
        }
      }
    }
  }
  
}
</style>